
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="canonical" href="https://blog.csdn.net/snakewarhead/article/details/6428385"/> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
关于UI组件的一些说明。<p/>
<ul>
	<li>
		<h2>标准定义的CSS</h2>
		全产品有以下标准CSS定义：
		<ul>
			<h3>布局类的</h3>
			<li>container-horizontal: 横向布局</li>
			<li>container-vertical: 竖向布局</li>
			<li>align-left: 向左靠齐</li>
			<li>align-center: 居中对齐</li>
			<li>align-right: 向右靠齐</li>
			<li>align-both-ends: 向两端靠齐，中间留空</li>
			对齐都是水平方向的，垂直方向的暂时未定义。
		</ul>
		<ul>
			<h3>边距类。</h3>
			<p>3种边距：small,normal和big</p>
			<li>small 边距
				<ul>
					<li>small-left-space：左边有较小边距。例如3px</li>
					<li>small-right-space：右边有较小边距。例如3px</li>
					<li>small-top-space：上边有较小边距。例如3px</li>
					<li>small-bottom-space：底部有较小边距。例如3px</li>
					<li>small-space：四边都有较小边距。例如3px</li>
				</ul>
			</li>
			<li>normal 边距
				<ul>
					<li>normal-left-space：左边有默认边距。例如8px</li>
					<li>normal-right-space：右边有默认边距。例如8px</li>
					<li>normal-top-space：上边有默认边距。例如8px</li>
					<li>normal-bottom-space：底部有默认边距。例如8px</li>
					<li>normal-space：四边都有默认边距。例如8px</li>
				</ul>
			</li>
			<li>big 边距
				<ul>
					<li>big-left-space：左边有较大边距。例如15px</li>
					<li>big-right-space：右边有较大边距。例如15px</li>
					<li>big-top-space：上边有较大边距。例如15px</li>
					<li>big-bottom-space：底部有较大边距。例如15px</li>
					<li>big-space：四边都有较大边距。例如15px</li>
				</ul>
			</li>
		</ul>
		<ul>
			<h3>文字大小类的</h3>
			<li>text-size-article-title: 定义文字尺寸，适用于整个文章的标题。比正文大两级。<br/>（每级多少待定，例如大一级是120%，大两级是150%。又或者正文14px，然后16px，18px）</li>
			<li>text-size-section-title: 定义文字尺寸，适用于文章的段落标题。比正文大一级</li>
			<li>text-size-main: 定义文字尺寸，适用于正文主体。</li>
			<li>text-size-note: 定义文字尺寸，适用于注解。比正文小一级。</li>
			<li>text-size-subscript: 定义文字尺寸，适用于下标或者上标。最小。</li>
		</ul>
		<ul>
			<h3>文字颜色类的</h3>
			<li>text-color-marked-error: 定义文字颜色。 严重错误。 例如红色加粗。</li>
			<li>text-color-error: 定义文字颜色。 严重错误。 例如红色。</li>
			<li>text-color-marked-main: 定义文字颜色。 醒目的正文。 例如加粗。</li>
			<li>text-color-main: 定义文字颜色。 正常的正文。 例如带点灰的黑色。</li>
			<li>text-color-marked-note: 定义文字颜色。 醒目的注释。 例如带下划线的红色的加粗的说明。</li>
			<li>text-color-note: 定义文字颜色。 普通的注释。 例如中度灰色。</li>
		</ul>
		<ul>
			<h3>图像大小类的</h3>
			<li>image-size-banner: 占整个页面宽度的 banner 图片</li>
			<li>image-size-thumbnail: 简略图</li>
			<li>image-size-main：正文插图</li>
			<li>image-size-icon: 图标类型的大小</li>
		</ul>
		<ul>
			<h3>按钮类。</h3>
			<p>btn 还是按钮类的基本CSS，例如告警按钮会写成 "btn btn-warning"</p>
			<li>btn-primary: 引导</li>
			<li>btn-info: 信息</li>
			<li>btn-warning: 警告</li>
			<li>btn-error: 错误</li>
		</ul>
	</li>
</ul>
</body>
</html>